<!--
 * @Author: zjj
 * @Date: 2019-11-29 12:01:07
 * @LastEditors: zjj
 * @LastEditTime: 2019-12-03 16:52:47
 -->
<!--  -->
<template>
    <div class="distribution-detail">
        <Nav :title.sync="inviteDetail.nick_name">
            <template v-slot:left>
                <span class="back" @click="$router.back()"></span>
            </template>
        </Nav>
        <div class="body">
            <div class="info">
                <div class="title flex aligin-center">基本信息</div>
                <div class="msg-wrapper">
                    <div class="flex msg-item aligin-center">
                        <span class="label">关系</span>
                        <span class="content">{{inviteDetail.relation}}</span>
                    </div>
                    <div class="flex msg-item aligin-center">
                        <span class="label">招募人</span>
                        <span class="content">{{inviteDetail.tag}}</span>
                    </div>
                </div>
            </div>
            <div class="info mt-16">
                <div class="title flex aligin-center">ta的贡献</div>
                <div class="msg-wrapper">
                    <div class="flex msg-item aligin-center">
                        <span class="label">本月贡献</span>
                        <span class="content">{{inviteDetail.mon_money}}</span>
                        <span class="arrow-right-no"></span>
                    </div>
                    <div class="flex msg-item aligin-center" @click="toOrderDetail">
                        <span class="label">累计贡献</span>
                        <span class="content">{{inviteDetail.total_money}}</span>
                        <span class="arrow-right"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import Nav from "../../components/Nav";
import {inviteDetail} from "../../api/api"
export default {
  components: { Nav },
  data() {
    return {
      name: "fff",
      inviteDetail:{}
    };
  },
  computed: {},
  watch: {},
  methods: {
      toOrderDetail(){
          this.$router.push({name:"distributionOrderDetail",params:{id:this.$route.params.id}})
      }
  },
  created() {},
  mounted() {
    inviteDetail({user_id:this.$route.params.id}).then(({data:{result}})=>{
      this.inviteDetail=result
    })
  },
  updated() {}, //生命周期 - 更新之后
  destroyed() {} //生命周期 - 销毁完成
};
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.distribution-detail {
  height: 100%;
  .pre {
    width: 45px;
    font-size: 12px;
    height: 14px;
    text-align: center;
    line-height: 14px;
    padding-right: 4px;
    border-right: 1px solid #eee;
  }
  .next {
    width: 45px;
    font-size: 12px;
    text-align: center;
    height: 14px;
    line-height: 14px;
  }
  .body {
      margin-top: 28px;
    padding: 0 19px;
    .info {
      padding-bottom: 26px;
      height: 190px;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0px 0px 15px 0px rgba(47, 43, 117, 0.1);
      border-radius: 8px;
      .title {
        padding-left: 17px;
        height: 58px;
        font-size: 16px;
        border-bottom: 1px solid #e9e9ef;
      }
      .msg-wrapper {
        padding-left: 35px;
        font-size: 14px;
        color: #666666;
      }
      .msg-item {
        height: 52px;
        border-bottom: 1px solid #e9e9ef;
      }
      .label{
          width: 100px;
          flex-shrink: 0;
      }
      .content{
          margin-right: 80px;
          flex: 1;
          text-align: center;
      }
      .arrow-right-no{
          margin-right: 18px;
          width: 14px;
          height: 14px;
      }
      .arrow-right{
          margin-right: 18px;
          width: 14px;
          height: 14px;
          background: url("../../assets/imgs/arrow-right@2x.png");
          background-size: 100% 100%;  
      }
    }
  }
}
</style>